<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="转账记录" left-arrow fixed @click-left="onClickLeft" />
        <div class="btn_bg">
            <div :class="{ active: selectedItems[2] }" @click="toggleSelected(2)">
                {{ days }}
                <van-icon name="arrow-down" />
            </div>
            <div :class="{ active: selectedItems[3] }" @click="toggleSelected(3)">
                {{ types }}
                <van-icon name="arrow-down" />
            </div>
            <div v-for="(item, index) in items" :key="index" :class="{ active: selectedItems[index] }"
                @click="toggleSelected(index)">
                {{ item }}
                <van-icon name="arrow-down" v-if="item !== '转入' && item !== '转出'" />
            </div>
        </div>

        <div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="team_list" v-for="(item, index) in fansList" :key="index">
                    <div class="team_list_item">
                        <img v-if="item.avatar_url" :src="item.avatar_url"
                            alt="" />
                        <img v-else src="../../../images/mine/head.png"
                            alt="" />
                        <img v-if="item.status == 100" src="../../../images/mine/icon_success.png" alt="" />
                        <div class="team_list_item_info">
                            <div>{{
                                item.remark }}</div>
                            <div style="font-size: 12px;color: #FF6200;">资金类型：{{ item.type_desc }}</div>
                            <div>
                                {{ item.create_time }}
                            </div>
                        </div>
                        <div class="record_money">
                            <div>{{item.income==true?'+':'-'}}{{item.amount }}</div>
                            <div>{{ item.type_name }}</div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <van-popup v-model="typeShow" position="bottom" :style="{ height: '30%' }">
            <van-picker title="转账类型" :value="type" show-toolbar value-key="transfer_title" @change="onChange"
                :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
        </van-popup>
        <van-popup v-model="dayShow" position="bottom" :style="{ height: '30%' }">
            <van-datetime-picker :value="new Date(currentDate)" type="date" title="选择年月日" :min-date="minDate"
                :max-date="maxDate"  @confirm="onConfirmDay" @cancel="onCancelDay" />
        </van-popup>
    </div>
</template>

<script>
import { TRANSFER_LIST } from '@/api/mine'
import {parseTime} from '@/tool/methods'
export default {
    data() {
        return {
            transfer: {},
            target_id: '',
            items: ['转入', '转出'], // 每个项的名称
            selectedItems: [false, false, false, false], // 记录每个项的选择状态
            page: 1,
            pageSize: 10,
            type: null,
            income_type: 0,
            date_range: 0,
            year: '',
            month: '',
            day: '',
            finished: false,
            loading: false,
            fansList: [],
            days: '本月',
            types: '全部类型',
            typeShow: false,
            columns: [],
            dayShow: false,
            minDate: new Date(1930, 0, 1),
            maxDate: new Date(2999, 10, 1),
            currentDate: new Date(),
        };
    },
    mounted() {
        this.transfer = JSON.parse(localStorage.getItem('transfer'))
        this.columns = JSON.parse(localStorage.getItem('config'))
        this.columns.unshift({
            type: null, // 根据需要设置类型
            transfer_title: '全部类型' // 设置标题为“全部”
        });
        window.scrollTo(0, 0)
    },
    methods: {
        toggleSelected(index) {
            this.$set(this.selectedItems, index, !this.selectedItems[index]);
            // console.log(this.selectedItems);
            if(index==2){
                this.selectedItems[2] = true
                this.dayShow = true
                this.typeShow = false
                // return
            }
            if(index==3){
                this.selectedItems[3] = true
                this.dayShow = false
                this.typeShow = true
                // return
            }
            this.page = 1
            this.fansList = []
            this.onLoad()


        },
        onConfirm() {
            this.typeShow = false
            this.page = 1
            this.fansList = []
            this.onLoad()
        },
        onCancel(){
            this.typeShow = false
            // this.type = null
            // this.types = '全部类型'
            // this.page = 1
            // this.fansList = []
            // this.onLoad()
            // this.selectedItems[3]=false
        },
        onConfirmDay(val){
            this.currentDate=parseTime(val, '{y}-{m}-{d}')
            this.days= this.currentDate
            this.year = this.currentDate.split('-')[0]
            this.month = this.currentDate.split('-')[1]
            this.day = this.currentDate.split('-')[2]
            this.dayShow = false
            this.page = 1
            this.fansList = []
            this.onLoad()
        },
        onCancelDay(){
            this.dayShow = false
            // this.days = null
            this.days = '本月'
            this.selectedItems[2]=false
            this.year = ''
            this.month = ''
            this.day = ''
            this.page = 1
            this.fansList = []
            this.onLoad()
        },
        onChange(e, val) {
            this.types = val.transfer_title
            this.type = val.type
        },
        onLoad() {
            let params = {};
            params["page_num"] = this.page;
            params["page_size"] = this.pageSize;
            params['type'] = this.type;
            if (this.selectedItems[0] && this.selectedItems[1]) {
                // 如果两个都是 true，传 0
                params['income_type'] = 0;
            } else if (this.selectedItems[0]) {
                // 如果只有 selectedItems[2] 是 true，传 1
                params['income_type'] = 1;
            } else if (this.selectedItems[1]) {
                // 如果只有 selectedItems[3] 是 true，传 2
                params['income_type'] = 2;
            } else {
                // 如果都不是 true，可以选择设置为 null 或其他默认值
                params['income_type'] = 0; // 可选
            }
            console.log();

            params['date_range'] = this.date_range;
            params['year'] = this.year;
            params['month'] = this.month;
            params['day'] = this.day;
            // params['status'] = this.active;
            this.$http.get(TRANSFER_LIST, { params: params }).then((res) => {
                const { list } = res.data;
                this.total_count = res.data.pages.total_count;
                if (list && list.length) {
                    this.page++;
                    this.fansList = this.fansList.concat(list);

                    // 加载状态结束
                    this.loading = false;
                    if (list.length < this.pageSize) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            });
        },
        onClickLeft() {
            this.$router.back();
        },
    },
};
</script>

<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: calc(100vh - 46px);
    padding-top: 46px;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-nav-bar__text {
        color: #333333;
    }

    .btn_bg {
        width: 95%;
        margin: 0 auto;
        margin-top: 0.2rem;
        display: flex;
        justify-content: space-between;
        position: relative;

        .list_type {
            width: 100%;
            background: #fff;
            position: absolute;
            margin-top: 1rem;
            float: left;
            border-radius: 0;
        }

        div {
            width: 23%;
            background: #F5F5F5;
            border: 1px solid #F5F5F5;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /* 初始背景色 */
            border-radius: 10rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 0.24rem;
            color: #666666;
            line-height: 17px;
            padding: 0.1rem 0;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.3s;
            /* 平滑过渡效果 */
        }

        div.active {
            background: rgba(243, 42, 35, 0.1);
            // border-radius: 12px;
            border: 1px solid #F32A23;
            color: #F32A23;
        }
    }
}

.team_list {
    width: 95%;
    margin: 0 auto;
    margin-top: 0.2rem;
    // border: 0.01rem solid #999;
    // border-radius: 0.16rem;
    background: #fff;

    .team_list_item {
        display: flex;
        justify-content: space-between;
        // padding: 0.24rem 0.32rem;
        border-bottom: 1px solid #e3e3e3;
        padding: 0.2rem 0.3rem;

        img {
            width: 0.76rem;
            height: 0.76rem;
            margin-top: 0.2rem;
            margin-right: 0.2rem;
        }

        .team_list_item_info {
            width: 60%;
            font-size: 0.28rem;
            line-height: 0.4rem;

            div:first-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 0.28rem;
                color: #333333;
                line-height: 0.4rem;
                // text-align: left;
                font-style: normal;
            }

            div:last-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 0.24rem;
                color: #999999;
                // line-height: 17px;

                // text-align: center;
                font-style: normal;
            }
        }

        .record_money {
            width: 30%;
            line-height: 0.6rem;
            font-size: 0.24rem;
            text-align: right;

            div:first-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 0.32rem;
                color: #f32a23;
                line-height: 0.4rem;
                // text-align: center;
                font-style: normal;
            }

            div:last-child {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .24rem;
                color: #666666;
                // line-height: 17px;
                // text-align: center;
                font-style: normal;
            }
        }
    }
}
</style>
